<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab button {
            background-color: inherit;
            float: left;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        .tab button:hover {
            background-color: #ddd;
        }

        .tab button.active {
            background-color: #ccc;
        }

        .tabcontent {
            display: none;
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        button {
            margin: 5px;
        }
    </style>
</head>

<body>

    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'Home')">主页</button>
        <button class="tablinks" onclick="openTab(event, 'BookManagement')">图书信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'ReaderManagement')">读者信息管理</button>
        <button class="tablinks" onclick="openTab(event, 'BorrowManagement')">借阅记录管理</button>
        <button class="tablinks" onclick="openTab(event, 'FineManagement')">罚款记录管理</button>
    </div>

    <div id="Home" class="tabcontent">
        <h2>欢迎使用图书管理系统</h2>
        <p>请通过上方的标签页选择你要操作的功能。</p>
    </div>

    <div id="BookManagement" class="tabcontent">
        <h2>图书信息管理</h2>
        <button onclick="addBook()">添加图书</button>
        <table id="bookTable">
            <thead>
                <tr>
                    <th>标题</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div id="ReaderManagement" class="tabcontent">
        <h2>读者信息管理</h2>
        <button onclick="addReader()">添加读者</button>
        <table id="readerTable">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div id="BorrowManagement" class="tabcontent">
        <h2>借阅记录管理</h2>
        <button onclick="addBorrowRecord()">添加借阅记录</button>
        <table id="borrowTable">
            <thead>
                <tr>
                    <th>读者姓名</th>
                    <th>图书标题</th>
                    <th>借阅日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div id="FineManagement" class="tabcontent">
        <h2>罚款记录管理</h2>
        <button onclick="addFineRecord()">添加罚款记录</button>
        <table id="fineTable">
            <thead>
                <tr>
                    <th>读者姓名</th>
                    <th>罚款原因</th>
                    <th>罚款金额</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <script>
        // 图书数据
        let books = [
            { title: '百年孤独', author: '加西亚·马尔克斯', publisher: '南海出版公司' },
            { title: '活着', author: '余华', publisher: '作家出版社' },
            { title: '人类简史：从动物到上帝', author: '尤瓦尔·赫拉利', publisher: '中信出版社' },
            { title: '追风筝的人', author: '卡勒德·胡赛尼', publisher: '上海人民出版社' },
            { title: '老人与海', author: '欧内斯特·海明威', publisher: '上海译文出版社' },
            { title: '小王子', author: '安托万·德·圣埃克苏佩里', publisher: '人民文学出版社' },
            { title: '呐喊', author: '鲁迅', publisher: '人民文学出版社' },
            { title: '三体', author: '刘慈欣', publisher: '重庆出版社' },
            { title: '简·爱', author: '夏洛蒂·勃朗特', publisher: '上海译文出版社' },
            { title: '平凡的世界', author: '路遥', publisher: '北京十月文艺出版社' }
        ];

        // 读者数据
        let readers = [
            { name: '张三', gender: '男', age: 25 },
            { name: '李四', gender: '女', age: 30 },
            { name: '王五', gender: '男', age: 28 },
            { name: '赵六', gender: '女', age: 22 },
            { name: '陈七', gender: '男', age: 35 },
            { name: '杨八', gender: '女', age: 26 },
            { name: '吴九', gender: '男', age: 29 },
            { name: '周十', gender: '女', age: 24 },
            { name: '郑十一', gender: '男', age: 32 },
            { name: '王十二', gender: '女', age: 27 }
        ];

        // 借阅记录数据
        let borrowRecords = [
            { readerName: '张三', bookTitle: '百年孤独', borrowDate: '2023-11-01' },
            { readerName: '李四', bookTitle: '活着', borrowDate: '2023-11-05' },
            { readerName: '王五', bookTitle: '人类简史：从动物到上帝', borrowDate: '2023-11-10' },
            { readerName: '赵六', bookTitle: '追风筝的人', borrowDate: '2023-11-15' },
            { readerName: '陈七', bookTitle: '老人与海', borrowDate: '2023-11-20' },
            { readerName: '杨八', bookTitle: '小王子', borrowDate: '2023-11-25' },
            { readerName: '吴九', bookTitle: '呐喊', borrowDate: '2023-12-01' },
            { readerName: '周十', bookTitle: '三体', borrowDate: '2023-12-05' },
            { readerName: '郑十一', bookTitle: '简·爱', borrowDate: '2023-12-10' },
            { readerName: '王十二', bookTitle: '平凡的世界', borrowDate: '2023-12-15' }
        ];

        // 罚款记录数据
        let fineRecords = [
            { readerName: '张三', reason: '逾期未还书', amount: 10.0, date: '2023-12-01' },
            { readerName: '李四', reason: '损坏图书', amount: 20.0, date: '2023-12-05' },
            { readerName: '王五', reason: '丢失图书', amount: 50.0, date: '2023-12-10' },
            { readerName: '赵六', reason: '逾期未还书', amount: 15.0, date: '2023-12-15' },
            { readerName: '陈七', reason: '损坏图书', amount: 30.0, date: '2023-12-20' },
            { readerName: '杨八', reason: '丢失图书', amount: 80.0, date: '2023-12-25' },
            { readerName: '吴九', reason: '逾期未还书', amount: 25.0, date: '2024-01-01' },
            { readerName: '周十', reason: '损坏图书', amount: 40.0, date: '2024-01-05' },
            { readerName: '郑十一', reason: '丢失图书', amount: 100.0, date: '2024-01-10' },
            { readerName: '王十二', reason: '逾期未还书', amount: 35.0, date: '2024-01-15' }
        ];

        // 初始化表格
        function initTables() {
            renderBooks();
            renderReaders();
            renderBorrowRecords();
            renderFineRecords();
        }

        // 渲染图书表格
        function renderBooks() {
            const table = document.getElementById('bookTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            books.forEach((book, index) => {
                const row = table.insertRow();
                const titleCell = row.insertCell(0);
                const authorCell = row.insertCell(1);
                const publisherCell = row.insertCell(2);
                const actionCell = row.insertCell(3);

                titleCell.textContent = book.title;
                authorCell.textContent = book.author;
                publisherCell.textContent = book.publisher;

                const editButton = document.createElement('button');
                editButton.textContent = '编辑';
                editButton.onclick = () => editBook(index);

                const deleteButton = document.createElement('button');
                deleteButton.textContent = '删除';
                deleteButton.onclick = () => deleteBook(index);

                actionCell.appendChild(editButton);
                actionCell.appendChild(deleteButton);
            });
        }

        // 添加图书
        function addBook() {
            const title = prompt('请输入图书标题');
            const author = prompt('请输入图书作者');
            const publisher = prompt('请输入图书出版社');
            if (title && author && publisher) {
                books.push({ title, author, publisher });
                renderBooks();
            }
        }

        // 编辑图书
        function editBook(index) {
            const book = books[index];
            const newTitle = prompt('请输入新的图书标题', book.title);
            const newAuthor = prompt('请输入新的图书作者', book.author);
            const newPublisher = prompt('请输入新的图书出版社', book.publisher);
            if (newTitle && newAuthor && newPublisher) {
                books[index] = { title: newTitle, author: newAuthor, publisher: newPublisher };
                renderBooks();
            }
        }

        // 删除图书
        function deleteBook(index) {
            if (confirm('确定要删除这本书吗？')) {
                books.splice(index, 1);
                renderBooks();
            }
        }

        // 渲染读者表格
        function renderReaders() {
            const table = document.getElementById('readerTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            readers.forEach((reader, index) => {
                const row = table.insertRow();
                const nameCell = row.insertCell(0);
                const genderCell = row.insertCell(1);
                const ageCell = row.insertCell(2);
                const actionCell = row.insertCell(3);

                nameCell.textContent = reader.name;
                genderCell.textContent = reader.gender;
                ageCell.textContent = reader.age;

                const editButton = document.createElement('button');
                editButton.textContent = '编辑';
                editButton.onclick = () => editReader(index);

                const deleteButton = document.createElement('button');
                deleteButton.textContent = '删除';
                deleteButton.onclick = () => deleteReader(index);

                actionCell.appendChild(editButton);
                actionCell.appendChild(deleteButton);
            });
        }

        // 添加读者
        function addReader() {
            const name = prompt('请输入读者姓名');
            const gender = prompt('请输入读者性别');
            const age = parseInt(prompt('请输入读者年龄'));
            if (name && gender &&!isNaN(age)) {
                readers.push({ name, gender, age });
                renderReaders();
            }
        }

        // 编辑读者
        function editReader(index) {
            const reader = readers[index];
            const newName = prompt('请输入新的读者姓名', reader.name);
            const newGender = prompt('请输入新的读者性别', reader.gender);
            const newAge = parseInt(prompt('请输入新的读者年龄', reader.age));
            if (newName && newGender &&!isNaN(newAge)) {
                readers[index] = { name: newName, gender: newGender, age: newAge };
                renderReaders();
            }
        }

        // 删除读者
        function deleteReader(index) {
            if (confirm('确定要删除这个读者吗？')) {
                readers.splice(index, 1);
                renderReaders();
            }
        }

        // 渲染借阅记录表格
        function renderBorrowRecords() {
            const table = document.getElementById('borrowTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            borrowRecords.forEach((record, index) => {
                const row = table.insertRow();
                const readerNameCell = row.insertCell(0);
                const bookTitleCell = row.insertCell(1);
                const borrowDateCell = row.insertCell(2);
                const actionCell = row.insertCell(3);

                readerNameCell.textContent = record.readerName;
                bookTitleCell.textContent = record.bookTitle;
                borrowDateCell.textContent = record.borrowDate;

                const editButton = document.createElement('button');
                editButton.textContent = '编辑';
                editButton.onclick = () => editBorrowRecord(index);

                const deleteButton = document.createElement('button');
                deleteButton.textContent = '删除';
                deleteButton.onclick = () => deleteBorrowRecord(index);

                actionCell.appendChild(editButton);
                actionCell.appendChild(deleteButton);
            });
        }

        // 添加借阅记录
        function addBorrowRecord() {
            const readerName = prompt('请输入读者姓名');
            const bookTitle = prompt('请输入图书标题');
            const borrowDate = prompt('请输入借阅日期');
            if (readerName && bookTitle && borrowDate) {
                borrowRecords.push({ readerName, bookTitle, borrowDate });
                renderBorrowRecords();
            }
        }

        // 编辑借阅记录
        function editBorrowRecord(index) {
            const record = borrowRecords[index];
            const newReaderName = prompt('请输入新的读者姓名', record.readerName);
            const newBookTitle = prompt('请输入新的图书标题', record.bookTitle);
            const newBorrowDate = prompt('请输入新的借阅日期', record.borrowDate);
            if (newReaderName && newBookTitle && newBorrowDate) {
                borrowRecords[index] = { readerName: newReaderName, bookTitle: newBookTitle, borrowDate: newBorrowDate };
                renderBorrowRecords();
            }
        }

        // 删除借阅记录
        function deleteBorrowRecord(index) {
            if (confirm('确定要删除这条借阅记录吗？')) {
                borrowRecords.splice(index, 1);
                renderBorrowRecords();
            }
        }

        // 渲染罚款记录表格
        function renderFineRecords() {
            const table = document.getElementById('fineTable').getElementsByTagName('tbody')[0];
            table.innerHTML = '';
            fineRecords.forEach((record, index) => {
                const row = table.insertRow();
                const readerNameCell = row.insertCell(0);
                const reasonCell = row.insertCell(1);
                const amountCell = row.insertCell(2);
                const actionCell = row.insertCell(3);

                readerNameCell.textContent = record.readerName;
                reasonCell.textContent = record.reason;
                amountCell.textContent = record.amount;

                const editButton = document.createElement('button');
                editButton.textContent = '编辑';
                editButton.onclick = () => editFineRecord(index);

                const deleteButton = document.createElement('button');
                deleteButton.textContent = '删除';
                deleteButton.onclick = () => deleteFineRecord(index);

                actionCell.appendChild(editButton);
                actionCell.appendChild(deleteButton);
            });
        }

        // 添加罚款记录
        function addFineRecord() {
            const readerName = prompt('请输入读者姓名');
            const reason = prompt('请输入罚款原因');
            const amount = parseFloat(prompt('请输入罚款金额'));
            if (readerName && reason &&!isNaN(amount)) {
                fineRecords.push({ readerName, reason, amount });
                renderFineRecords();
            }
        }

        // 编辑罚款记录
        function editFineRecord(index) {
            const record = fineRecords[index];
            const newReaderName = prompt('请输入新的读者姓名', record.readerName);
            const newReason = prompt('请输入新的罚款原因', record.reason);
            const newAmount = parseFloat(prompt('请输入新的罚款金额', record.amount));
            if (newReaderName && newReason &&!isNaN(newAmount)) {
                fineRecords[index] = { readerName: newReaderName, reason: newReason, amount: newAmount };
                renderFineRecords();
            }
        }

        // 删除罚款记录
        function deleteFineRecord(index) {
            if (confirm('确定要删除这条罚款记录吗？')) {
                fineRecords.splice(index, 1);
                renderFineRecords();
            }
        }

        // 打开 tab 页面
        function openTab(evt, tabName) {
            let i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName('tabcontent');
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = 'none';
            }
            tablinks = document.getElementsByClassName('tablinks');
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(' active', '');
            }
            document.getElementById(tabName).style.display = 'block';
            evt.currentTarget.className += ' active';
        }

        // 初始化表格
        initTables();
        // 默认打开主页
        document.getElementById('Home').style.display = 'block';
        document.getElementsByClassName('tablinks')[0].className += ' active';
    </script>
</body>

</html>    